<template>
  <div class="container">
    <div id="draw-border" style="position: absolute; top: 150px; left: 1180px">
      <a @click="back">
        <button><span>返回</span></button>
      </a>
    </div>
  <div class="display">
    <center>
      <h2 style="color: rgb(190, 158, 111);">My Orders</h2>

      <table>
        <tr>
          <th>Order ID</th>
          <th style="width: 220px;">Date</th>
          <th style="width: 100px">Total Price</th>
          <th>Order Status</th>
          <th style="width: 130px">Action</th>
        </tr>

          <tr v-for="order in orderList">
            <td>
              <router-link :to="'/viewOrderForm/'+order.orderId" v-text="order.orderId" ></router-link>
            </td>
            <td v-text="order.orderDate">
            </td>
            <td v-text="order.totalPrice">
            </td>
            <td v-if="order.lineItems.length===0" style="color: brown">Failed</td>
            <td v-else style="color: forestgreen">Success</td>
            <td>
              <div style="display: flex">
                <router-link :to="'/viewOrderForm/'+order.orderId" style="width: 50%">详情</router-link>
                <a style="width: 50%" @click="deleteOrder(order.orderId)">删除</a>
              </div>

            </td>
          </tr>

      </table>

    </center>
  </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "orderList",
  data() {
    return{
      username:'',
      orderList:[]
    }
  },
  // mounted：在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作
  mounted() {
    this.init();
  },
  methods:{
    //初始化页面数据
    init(){
      let username = localStorage.getItem('username')
      this.username = username
      if(username == null || username ===''){
        window.confirm('请先登录！')
      }else{
        axios({
          url: 'http://localhost:8088/order/orderList/'+this.username,
          method: 'get',
        }).then(res=>{
          console.log(res.data.data)
          this.orderList = res.data.data
        })
      }
    },
    //删除订单
    deleteOrder(orderId){
      if(window.confirm('是否删除数据？'))
        console.log('正在删除订单：'+orderId)
    },
    // 返回上一页
    back() {
      this.$router.go(-1)
    },
  },

}
</script>

<style src="../../assets/css/shop.css" scoped></style>
<style scoped>
@import "../../assets/css/shop.css";
.display{
  max-height: 560px;
  width: 680px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 100px auto 0;
}

table{
  line-height: 30px;
  text-align: center;
  width: 650px;
}

</style>